<template>
    <div class="text">
        添加账号
    </div>
    <el-form 
      ref="formRef" 
      style="max-width: 600px" 
      :model="formData" 
      label-width="100px"
      class="demo-dynamic"
    >
      <el-form-item 
        prop="username" 
        label="账号" 
        :rules="[
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur',
          },
        ]"
      >
        <el-input v-model="formData.username" />
      </el-form-item>
      <el-form-item 
        prop="password" 
        label="密码" 
        :rules="[
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
          {
            min: 6,
            message: '密码长度至少6个字符',
            trigger: ['blur', 'change'],
          },
        ]"
      >
        <el-input v-model="formData.password" type="password" show-password />
      </el-form-item>
      
      <el-form-item label="用户组" prop="userGroup" :rules="[
        {
          required: true,
          message: '请选择用户组',
          trigger: 'change',
        },
      ]">
        <el-select v-model="formData.userGroup" placeholder="请选择用户组">
          <el-option label="超级管理员" value="超级管理员" />
          <el-option label="普通管理员" value="普通管理员" />
        </el-select>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="submitForm(formRef)">添加账号</el-button>
        <el-button @click="resetForm(formRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { FormInstance } from 'element-plus'
  import { ElMessage } from 'element-plus'
  // 引入添加账号接口
  import { addAccount } from '@/api/account' 
  
  const formRef = ref<FormInstance>()
  const formData = reactive({
    username: '',
    email: '',
    password: '',
    userGroup: ''
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
      if (valid) {
        try {
          // 构造请求数据
          const data = {
            account: formData.username,
            password: formData.password,
            userGroup: formData.userGroup
          }
          // 调用添加账号接口
          const res = await addAccount(data) 
          if (res.code === 0) {
            ElMessage.success('添加账号成功')
            // 清空表单数据
            formData.username = ''
            formData.password = ''
            formData.userGroup = ''
          } else {
            ElMessage.error(res.msg)
          }
        } catch (error) {
          ElMessage.error('添加账号失败，请检查网络或联系管理员')
          console.error('添加账号失败:', error)
        }
      } else {
        ElMessage.error('请正确填写表单!')
        return false
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    ElMessage.info('表单已重置')
  }
  </script>
  
  <style scoped>
  .text{
    width: 100%;
    height: 50px;
    border-bottom: 2px solid #f0f2f5;
    margin-bottom: 20px;
    font-size: 23px;
  }
  </style>